<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
    <!-- import CSS -->
    <!-- <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    /> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/element-ui-index.css" />
  </head>

  <body>
    <div id="app">
      <div style="margin-top: 15px">
        <el-form>
          <el-row>
            <!-- 写一个查询的输入框 -->
            <el-form-item>
              <el-input> </el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <!-- 一个弹窗的按钮 -->
            <el-form-item>
              <el-button @click.native.prevent="handleClickAdd">新增</el-button>
              <el-button>搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>

      <!-- 写一个表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="job" label="职位" width="180"> </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClickEdit(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              @click="handleClickDel(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹窗部分 -->
      <el-dialog
        :visible.sync="dialogOpen"
        :title="dialogTiltle"
        :before-close="dialogClose"
      >
        <el-from>
          <p>新增信息</p>
          <el-form-item>
            <el-input> </el-input>
          </el-form-item>

          <el-form-item>
            <el-button>保存</el-button><el-button>重置</el-button>
          </el-form-item>
        </el-from>
      </el-dialog>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="js/vue.js"></script>
  <!-- import JavaScript -->
  <script src="js/element-ui-lib-index.js"></script>
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          dialogOpen: false,
          dialogTiltle: "tiltle",
          tableData: [
            {
              job: "区域经理",
              date: "2016-05-04",
              name: "王小虎",
              address: "浦东",
            },
            {
              job: "店长",
              date: "2017-06-05",
              name: "张三",
              address: "浦西",
            },
            {
              job: "店员",
              date: "2018-07-06",
              name: "李四",
              address: "浦南",
            },
            {
              job: "保安",
              date: "2019-08-09",
              name: "王五",
              address: "浦北",
            },
          ],
        };
      },
      methods: {
        // test=(dialogOpen)=>true,
        dialogClose(done) {
          done();
        },
        handleClickAdd() {
          this.dialogOpen = true;
          this.dialogTiltle = "新增";
          console.log("clickAdd" /* row */);
        },
        // 整一个编辑
        handleClickEdit(row) {
          this.dialogOpen = true;
          console.log("clickEdit", row);
        },
        //整一个删除
        handleClickDel(row) {
          this.$confirm("是否删除？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).catch(() => {});
          console.log("clickDel", row);
        },
      },
    });
  </script>
</html>
